<template>
<div class="order_detail_view" v-loading>
    <div class="detail_page" v-if="data">
        <div class="detail_header">
            <div class="header_item" style="width:30%">
                <div class="header_item_title">
                    客户信息
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">联系人</div>
                    <div class="item_row_value">{{helper.showValue(data.customerUser.contactName)}}</div>
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">联系电话</div>
                    <div class="item_row_value">{{helper.showValue(data.customerUser.contactMobile)}}</div>
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">联系地址</div>
                    <div class="item_row_value">{{helper.showValue(data.customerUser.address)}}</div>
                </div>
            </div>

            <div class="header_item" style="width:25%">
                <div class="header_item_title">
                    订单信息
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">订单编号</div>
                    <div class="item_row_value">{{helper.showValue(data.orderNo)}}</div>
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">服务类型</div>
                    <div class="item_row_value">{{helper.showValue(data.serverTypeName)}}</div>
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">产品类型</div>
                    <div class="item_row_value">{{helper.showValue(data.item.categoryName)}}</div>
                </div>
            </div>

            <div class="header_item" style="width:35%">
                <div class="header_item_title">

                </div>
                <div class="header_item_row">
                    <div class="item_row_label">订单状态</div>
                    <!-- <div class="item_row_value">待支付</div> -->
                    <template v-if="['order-1','server-4','server-10','server-14'].indexOf(data.showStatus.state) !== -1">
                        <el-tag class="item_row_value" type="warning" effect="dark">{{helper.showValue(data.showStatus.name)}}</el-tag>
                    </template>
                    <template v-else-if="['order-10','server-15'].indexOf(data.showStatus.state) !== -1">
                        <el-tag class="item_row_value" type="danger" effect="dark">{{helper.showValue(data.showStatus.name)}}</el-tag>
                    </template>
                    <template v-else-if="['order-12'].indexOf(data.showStatus.state) !== -1">
                        <el-tag class="item_row_value" type="success" effect="dark">{{helper.showValue(data.showStatus.name)}}</el-tag>
                    </template>
                    <template v-else-if="['order-8'].indexOf(data.showStatus.state) !== -1">
                        <el-tag class="item_row_value" type="info" effect="dark">{{helper.showValue(data.showStatus.name)}}</el-tag>
                    </template>
                    <template v-else>
                        <el-tag class="item_row_value" effect="dark">{{helper.showValue(data.showStatus.name)}}</el-tag>
                    </template>

                </div>
                <div class="header_item_row">
                    <div class="item_row_label">订单时效</div>
                    <div class="item_row_value">{{helper.getMapArrayLabel(isOverdueOptions,data.isOverdue)}}</div>
                </div>
                <div class="header_item_row">
                    <div class="item_row_label">创建时间</div>
                    <div class="item_row_value">{{helper.showValue(data.createTime)}}</div>
                </div>
            </div>
        </div>
        <div class="detail_content">
            <div class="content_left">
                <div class="left_rows">
                    <div class="header_item_title">
                        产品信息
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">产品类型</div>
                        <div class="item_row_value">{{helper.showValue(data.item.categoryName)}}</div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">产品名称</div>
                        <div class="item_row_value">{{helper.showValue(data.item.productName)}}</div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">产品型号</div>
                        <div class="item_row_value">{{helper.showValue(data.item.productModelNo)}}</div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">序列号</div>
                        <div class="item_row_value">{{helper.showValue(data.item.productSerialNo)}}</div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">出厂日期</div>
                        <div class="item_row_value">{{helper.showValue(data.item.productFactoryDate)}}</div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">在保状态</div>
                        <div class="item_row_value" v-if="data.item.productInServer == 1">
                            <el-tag effect="dark">保内</el-tag>
                        </div>
                        <div class="item_row_value" v-else-if="data.item.productInServer == 0">
                            <el-tag type="danger" effect="dark">保外</el-tag>
                        </div>
                        <div class="item_row_value" v-else>
                            --
                        </div>
                    </div>
                    <div class="header_item_row">
                        <div class="item_row_label">所属门店</div>
                        <div class="item_row_value">{{helper.showValue(data.item.customerStoreName)}}</div>
                    </div>
                </div>
            </div>
            <div class="content_right">
                <el-tabs v-model="detailActive" @tab-click="detailTabClick" stretch style="width:500px">
                    <el-tab-pane :label="item.label" :name="item.name" v-for="item in detailTabOptions" :key="item.name">
                    </el-tab-pane>
                </el-tabs>
                <div class="tab_content">
                    <div class="serve_view" v-if="detailActive == 'serve'">
                        <template v-for="item in data.servers">
                            <div class="serve_container" v-if="item.serverStep=='1'" :key="item.id">
                                <div class="serve_item_title">
                                    服务信息
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">服务类型</div>
                                    <div class="item_row_value">{{helper.showValue(item.serverTypeName)}}</div>
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">问题类型</div>
                                    <div class="item_row_value">{{helper.showValue(item.problemTypeName)}}</div>
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">问题描述</div>
                                    <div class="item_row_value">{{helper.showValue(item.problemDescribe)}} </div>
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">图片/视频</div>
                                    <div class="item_row_value">
                                        <template v-for="(image,index) in item.attach.split(',')">
                                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                <video width="220" height="200" controls>
                                                    <source :src="image" type="video/mp4">
                                                </video>
                                            </div>
                                            <el-image v-else style="width: 100px; height: 100px; margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                            </el-image>
                                        </template>

                                    </div>
                                </div>
                            </div>

                            <div class="serve_container" v-if="item.serverStep=='2'" :key="item.id">
                                <div class="serve_item_title">
                                    诊断内容
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">诊断描述</div>
                                    <div class="item_row_value">{{helper.showValue(item.problemDescribe)}}</div>
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">图片/视频</div>
                                    <div class="item_row_value">
                                        <template v-for="(image,index) in item.attach.split(',')">
                                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                <video width="220" height="200" controls>
                                                    <source :src="image" type="video/mp4">
                                                </video>
                                            </div>
                                            <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                            </el-image>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <div class="serve_container" v-if="item.serverStep=='3'" :key="item.id">
                                <div class="serve_item_title">
                                    服务结果
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">结果描述</div>
                                    <div class="item_row_value">{{helper.showValue(item.problemDescribe)}}</div>
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">图片/视频</div>
                                    <div class="item_row_value">
                                        <template v-for="(image,index) in item.attach.split(',')">
                                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                <video width="220" height="200" controls>
                                                    <source :src="image" type="video/mp4">
                                                </video>
                                            </div>
                                            <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                            </el-image>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <div class="serve_container" v-if="item.serverStep=='4'" :key="item.id">
                                <div class="serve_item_title">
                                    工程维修单
                                </div>
                                <div class="serve_item_row">
                                    <div class="item_row_label">图片/视频</div>
                                    <div class="item_row_value">
                                        <template v-for="(image,index) in item.attach.split(',')">
                                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                <video width="220" height="200" controls>
                                                    <source :src="image" type="video/mp4">
                                                </video>
                                            </div>
                                            <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                            </el-image>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="order_view" v-if="detailActive == 'order'">
                        <el-timeline v-if="data.process.length>0">
                            <el-timeline-item v-for="(item, index) in data.process" :key="index" :timestamp="item.actionDescribe" placement="top">
                                <div style="color:#444;margin-bottom:5px;">{{item.actionTime}}</div>
                                <div style="color:#000" v-if="item.assignDesc">{{item.assignDesc}}</div>
                            </el-timeline-item>
                        </el-timeline>
                        <el-empty v-else description="暂无进度"></el-empty>
                    </div>
                    <div class="pay_view" v-if="detailActive == 'pay'">
                        <div class="pay_body">
                            <template v-for="item in data.payment.payments">
                                <div class="pay_item" v-if="item.payItem == '1'" :key="item.id">
                                    <div class="pay_title">上门费</div>
                                    <div class="pay_row">
                                        <div class="pay_label">标准定价</div>
                                        <div class="pay_value">{{helper.showValue(item.price)}}元/次</div>
                                    </div>
                                    <div class="pay_row" v-if="item.paidAmount && item.paidAmount>0">
                                        <div class="pay_label">支付方式</div>
                                        <div class="pay_value">{{item.payMode=="1"?"线上支付":item.payMode=="2"?"线下支付":"--"}}</div>
                                    </div>
                                    <div class="pay_row" v-if="item.payMode=='2'">
                                        <div class="pay_label">支付凭证</div>
                                        <div class="pay_value">
                                            <template v-for="(image,index) in item.payVoucher.split(',')">
                                                <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                    <video width="220" height="200" controls>
                                                        <source :src="image" type="video/mp4">
                                                    </video>
                                                </div>
                                                <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                                </el-image>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="pay_item" v-if="item.payItem == '2'" :key="item.id">
                                    <div class="pay_title">维修费</div>
                                    <div class="pay_row">
                                        <div class="pay_label">标准定价</div>
                                        <div class="pay_value">{{helper.showValue(item.payableAmount)}}元/次</div>
                                    </div>
                                    <div class="pay_row">
                                        <div class="pay_label">维修工时</div>
                                        <div class="pay_value">{{helper.showValue(item.workHour)}}小时</div>
                                    </div>
                                    <div class="pay_row" v-if="item.paidAmount && item.paidAmount>0">
                                        <div class="pay_label">支付方式</div>
                                        <div class="pay_value">{{item.payMode=="1"?"线上支付":item.payMode=="2"?"线下支付":"--"}}</div>
                                    </div>
                                    <div class="pay_row" v-if="item.payMode=='2'">
                                        <div class="pay_label">支付凭证</div>
                                        <div class="pay_value">
                                            <template v-for="(image,index) in item.payVoucher.split(',')">
                                                <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                    <video width="220" height="200" controls>
                                                        <source :src="image" type="video/mp4">
                                                    </video>
                                                </div>
                                                <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                                </el-image>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="pay_item" v-if="item.payItem == '3'" :key="item.id">
                                    <div class="pay_title">配件费</div>
                                    <div class="pay_row" v-for="cell in data.parts" :key="cell.name">
                                        <div class="pay_label">{{cell.name+" x"+cell.qty}}</div>
                                        <div class="pay_value">{{helper.showValue(cell.amount)}}元</div>
                                    </div>
                                    <div class="pay_row" v-if="item.paidAmount && item.paidAmount>0">
                                        <div class="pay_label">支付方式</div>
                                        <div class="pay_value">{{item.payMode=="1"?"线上支付":item.payMode=="2"?"线下支付":"--"}}</div>
                                    </div>
                                    <div class="pay_row" v-if="item.payMode=='2'">
                                        <div class="pay_label">支付凭证</div>
                                        <div class="pay_value">
                                            <template v-for="(image,index) in item.payVoucher.split(',')">
                                                <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                                    <video width="220" height="200" controls>
                                                        <source :src="image" type="video/mp4">
                                                    </video>
                                                </div>
                                                <el-image v-else style="width: 100px; height: 100px;margin-right:10px;" :src="image" :preview-src-list="[image]" :key="index">
                                                </el-image>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="pay_total" style="font-weight:bold">
                            <div class="pay_row">
                                <div class="pay_label">总计费用</div>
                                <div class="pay_value">{{helper.showValue(data.payment.totalAmount)}}元</div>
                            </div>
                            <div class="pay_row">
                                <div class="pay_label">实付金额</div>
                                <div class="pay_value">{{helper.showValue(data.payment.paidAmount)}}元</div>
                            </div>
                            <div class="pay_row" v-if="data.showStatus.state=='server-15'">
                                <div class="pay_label">审核原因</div>
                                <div class="pay_value" style="color:#f00">{{helper.showValue(data.payment.payments[0].reason)}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="evaluate_view" v-if="detailActive == 'evaluate'">
                        <div class="evaluate_body" v-if="data.evaluates.length>0 && data.engineerUser">
                            <div class="evaluate_row">
                                <div class="evaluate_label">师傅姓名</div>
                                <div class="evaluate_value">{{helper.showValue(data.engineerUser.realName)}}</div>
                            </div>
                            <div class="evaluate_row">
                                <div class="evaluate_label">师傅电话</div>
                                <div class="evaluate_value">{{helper.showValue(data.engineerUser.mobile)}}</div>
                            </div>
                            <div class="evaluate_row">
                                <div class="evaluate_label">专业性</div>
                                <div class="evaluate_value">
                                    <el-rate v-model="data.evaluates[0].majorScore" disabled show-score text-color="#ff9900" score-template="{value}">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="evaluate_row">
                                <div class="evaluate_label">服务态度</div>
                                <div class="evaluate_value">
                                    <el-rate v-model="data.evaluates[0].serviceScore" disabled show-score text-color="#ff9900" score-template="{value}">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="evaluate_row">
                                <div class="evaluate_label">时效性</div>
                                <div class="evaluate_value">
                                    <el-rate v-model="data.evaluates[0].timeScore" disabled show-score text-color="#ff9900" score-template="{value}">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="evaluate_row">
                                <div class="evaluate_label">客户意见</div>
                                <div class="evaluate_value">{{helper.showValue(data.evaluates[0].content)}}</div>
                            </div>
                        </div>
                        <el-empty v-else description="暂无评价"></el-empty>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="detail_footer" v-if="data">
        <el-button @click="closeDetail">关闭</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-1'" @click="assignOrder">订单指派</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-2'" @click="cancelOrder">取消订单</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-3'" @click="checkOrder">抢单审核</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-4'" @click="reassignOrder">重新指派</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-5'" @click="setOut">立即出发</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-6'" @click="reach">确认到达</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-7'" @click="serviceAnalysis">服务分析</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-8'||data.showStatus.state=='server-10'" @click="revokeOrder">撤单放弃</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-8'" @click="adjustAmount">调整金额</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-8'" @click="startServe">开始服务</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-9'" @click="holdOrder">挂单</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-9'" @click="applyPart">申请配件</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-9'" @click="endService">服务完成</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-10'" @click="continueService">继续服务</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='server-14'" @click="payCheck">审核</el-button>
        <el-button type="primary" v-show="data.showStatus.state=='order-7'" @click="allocationMoney">分配佣金</el-button>
    </div>
</div>
</template>

<script>
import {
    getOrderDetail
} from "@/api/vanger/order";
export default {
    props: {
        id: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            data: "",
            loading: false,

            detailActive: "serve",
            detailTabOptions: [{
                    label: "服务信息",
                    name: "serve"
                },
                {
                    label: "订单进度",
                    name: "order"
                },
                {
                    label: "收费清单",
                    name: "pay"
                },
                {
                    label: "客户评价",
                    name: "evaluate"
                },
            ],

            isOverdueOptions: [{
                    label: "正常",
                    value: "1"
                },
                {
                    label: "即将超时",
                    value: "2"
                },
                {
                    label: "已超时",
                    value: "3"
                },
            ],

        }
    },
    mounted() {
        this.loadDetailData();
    },
    methods: {
        loadDetailData() {
            this.loading = true;
            let params = {
                id: this.id
            }
            getOrderDetail(params).then(res => {
                console.log(res);
                this.data = res.data;
                this.loading = false;
            })
        },

        closeDetail() {
            this.$emit("close");
        },
        detailTabClick() {

        },

        assignOrder() {
            this.$emit("assignOrder");
        },
        cancelOrder() {
            this.$emit("cancelOrder");
        },
        checkOrder() {
            this.$emit("checkOrder");
        },
        reassignOrder() {
            this.$emit("reassignOrder");
        },
        setOut() {
            this.$emit("setOut");
        },
        reach() {
            this.$emit("reach");
        },
        serviceAnalysis() {
            this.$emit("serviceAnalysis");
        },
        revokeOrder() {
            this.$emit("revokeOrder");
        },
        adjustAmount() {
            this.$emit("adjustAmount");
        },
        startServe() {
            this.$emit("startServe");
        },
        holdOrder() {
            this.$emit("holdOrder");
        },
        applyPart() {
            this.$emit("applyPart");
        },
        endService() {
            this.$emit("endService");
        },
        continueService() {
            this.$emit("continueService");
        },
        payCheck() {
            this.$emit("payCheck");
        },
        allocationMoney() {
            this.$emit("allocationMoney");
        },
    },
}
</script>

<style lang="scss" scoped>
.order_detail_view {
    .detail_page {
        width: 100%;
        height: calc(100% - 50px);
        background-color: #ddd;
        padding: 15px;
        box-sizing: border-box;

        .detail_header {
            width: 100%;
            height: 200px;
            background-color: #fff;
            padding: 20px;
            box-sizing: border-box;
            display: flex;

            .header_item {
                margin-right: 2%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

            }
        }

        .header_item_title {
            height: 30px;
            font-weight: bold;
        }

        .header_item_row {
            display: flex;
            align-items: center;
            height: 45px;

            .item_row_label {
                white-space: nowrap !important;
                width: 65px !important;
            }

            .item_row_value {
                margin-left: 25px;
            }
        }

        .detail_content {
            width: 100%;
            height: calc(100% - 215px);
            margin-top: 15px;
            display: flex;

            .content_left {
                width: 30%;
                height: 100%;
                background-color: #fff;
                padding: 20px;
                box-sizing: border-box;

                .left_rows {
                    height: 70%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                }
            }

            .content_right {
                width: calc(70% - 15px);
                margin-left: 15px;
                height: 100%;
                background-color: #fff;
                padding: 20px;
                box-sizing: border-box;

                .tab_content {
                    width: 100%;
                    height: calc(100% - 50px);
                    margin-top: 10px;
                    overflow-y: auto;

                    .serve_view {
                        .serve_container {
                            margin-top: 15px;
                            padding: 15px;
                            border: 1px solid #ccc;
                            border-radius: 8px;
                        }

                        .serve_item_title {
                            font-weight: bold;
                        }

                        .serve_item_row {
                            margin-top: 25px;
                            display: flex;
                            align-items: center;

                            .item_row_label {
                                white-space: nowrap;
                                width: 65px;
                            }

                            .item_row_value {
                                margin-left: 25px;
                                display: flex;
                            }
                        }
                    }
                }
            }
        }

        .pay_view {
            .pay_body {
                margin-left: 15px;
                display: flex;
            }

            .pay_item {
                margin-right: 10%;

                .pay_title {
                    font-weight: bold;
                }
            }

            .pay_total {
                margin-left: 15px;
                margin-top: 40px;
            }

            .pay_row {
                margin-top: 15px;
                display: flex;
                align-items: center;

                .pay_label {
                    white-space: nowrap;
                    width: 120px;
                }

                .pay_value {
                    flex: 1;
                }
            }
        }

        .evaluate_view {
            .evaluate_body {
                .evaluate_row {
                    margin-top: 15px;
                    margin-left: 15px;
                    display: flex;
                    align-items: center;

                    .evaluate_label {
                        white-space: nowrap;
                        width: 100px;
                        font-weight: bold;
                    }

                    .evaluate_value {
                        flex: 1;
                    }
                }
            }

        }
    }

    .detail_footer {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ::v-deep.el-timeline-item__timestamp {
        color: #000;
        font-weight: bold;
    }
}
</style>
